<template>
	<view class="container">
		<view class="barList">
			<view v-for="(item,index) in barList" @click="chooseItem(index)" :key="index">
				<bar-item :bgColor="item.color" :isActive="item.isActive" :borderCol="item.borderCol"></bar-item>
			</view>
		</view>
		<u-transition :show="showPay" mode="fade-up">
			<view class="pay">
				<view class="qrcode">
					<qrcode ref="qrcode"></qrcode>
					<view style="font-weight: bold;margin-top: 10rpx;">
						扫码付款
					</view>
				</view>
				<view class="price">
					应付：<view style="color: red;">
						{{selectNum}}元
					</view>
				</view>
			</view>
		</u-transition>
	</view>
</template>

<script>
	import barItem from '@/components/bar-item.vue';
	import qrcode from '@/components/qrcode/qrcode.vue'
	export default {
		components: {
			barItem
		},
		data() {
			// uni.$u.colorToRgba('#000000', 0.35)
			return {
				barList: [{
						// color: `linear-gradient(180deg, ${uni.$u.colorToRgba('#ffff7f',0.1)} 0%, ${uni.$u.colorToRgba('#919113', 0.35)} 100%)`,
						isActive: false,
						color: 'rgba(247,247,119,0.5)',
						
						borderCol: 'rgba(247,247,119,0.5)'
					},
					{
						// color: 'linear-gradient(180deg, #8383ff 0%, #180891 100%)',
						isActive: false,
						color: 'rgba(78,70,200,0.5)',
						
						borderCol: 'rgba(78,70,200,0.5)'
					},
					{
						// color: 'linear-gradient(180deg, #ff002e 0%, #915961 100%)',
						isActive: false,
						color: 'rgba(206,40,69,0.5)',
						
						borderCol: 'rgba(206,40,69,0.5)'
					},
					{
						// color: 'linear-gradient(180deg, #ffaa00 0%, #6f4a00 100%)',
						isActive: false,
						color: 'rgba(182,122,0,0.5)',
						
						borderCol: 'rgba(182,122,0,0.5)'
					},
					{
						// color: 'linear-gradient(180deg, #03ff0b 0%, #539157 100%)',
						isActive: false,
						color: 'rgba(46,197,52,0.5)',
						
						borderCol: 'rgba(46,197,52,0.5)'
					},
					{
						// color: 'linear-gradient(180deg, #aa00ff 0%, #250071 100%)',
						isActive: false,
						color: 'rgba(106,0,186,0.5)',
						
						borderCol: 'rgba(106,0,186,0.5)'
					},
					{
						// color: 'linear-gradient(180deg, #181bff 0%, #478591 100%)',
						isActive: false,
						color: 'rgba(71,133,145,0.5)',
						
						borderCol: 'rgba(71,133,145,0.5)'
					}
				],
				selectNum: 0,
				// showPay:false
			}
		},
		onLoad() {},
		watch: {
			barList: {
				deep: true,
				handler(val) {
					// console.log(val);
					let num = val.filter((item) => item.isActive == true)
					this.selectNum = num.length
					// 当支付框存在的同时，选择的柱状数发生变化时调用子组件重绘二维码方法
					if(this.$refs.qrcode){
						this.remakeQrCode()
					}
				}
			},
		},
		computed: {
			showPay() {
				if(this.selectNum){
					return true
				} else {
					return false
				}
			},
		},
		methods: {
			chooseItem(e) {
				if (this.barList[e].isActive) {
					this.barList[e].isActive = false
				} else {
					this.barList[e].isActive = true;
				}
			},
			// 重新绘制二维码
			remakeQrCode(){
				this.$refs.qrcode.remakeQrcode();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: no-repeat url('../../static/background.jpg');
		background-size: 100vw 100%;
		width: 100vw;
		height: 100vh;
		overflow-y: hidden;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.barList {
			margin-top: 200rpx;
			@include flex(row);
			justify-content: space-around;
			width: 100%;
		}

		.pay {
			border-radius: 40rpx;
			opacity: 1;
			backdrop-filter: blur(30rpx);
			background: rgba(255, 255, 255, 0.2);
			@include flex(row);
			justify-content: space-around;
			align-items: center;
			margin: 200rpx auto;
			width: 90%;
			padding: 20rpx 0;

			.qrcode {
				@include flex(column);
				align-items: center;
			}

			.price {
				@include flex(row);
				font-weight: bolder;
				font-size: 60rpx;
			}
		}
	}
</style>